import React from 'react'

import { NavBar } from 'antd-mobile'

import PropTypes from 'prop-types'

import { withRouter } from 'react-router-dom'

import classNames from 'classnames'

// import './index.scss'
// 修改为 css modules 的方式
import styles from './index.module.scss'

// 注意： 这个组件并不是直接通过 Route 来渲染出来的，所以，该组件的 props 中，无法直接获取到路由信息！！！
//        也就是说只有通过 Route 渲染出来的组件，才能够通过 props 来拿到路由信息.

// 如果需要让一个不是通过 Route 渲染出来的组件中，拿到路由信息（比如：当前组件）
// 可以通过 React 路由提供的 高阶组件（withRouter）来包装
// 只要使用这个高阶组件包装后，那么，这个组件中就可以获取到路由信息了。
// 高阶组价的用法： const 增强后的组件 = withRouter( 被包装的组件 )
function NavHeader(props) {
  // console.log('NavHeader props:', props)
  return (
    <NavBar
      // className={`${styles.navBar} ${props.className}`}
      className={classNames(styles.navBar, {
        [props.className]: !!props.className
      })}
      mode="light"
      icon={<i className="iconfont icon-back"></i>}
      onLeftClick={() => props.history.go(-1)}
    >
      {props.children}
    </NavBar>
  )
}

// 添加属性校验：
NavHeader.propTypes = {
  // 约定 children 为 字符串类型，并且为必填项
  children: PropTypes.string.isRequired,
  className: PropTypes.string
}

// 说明： 使用 withRouter 包装我们自己的 NavHeader 组件
//        并且，最终渲染的组件就是 包装后增强的组件
export default withRouter(NavHeader)
